<template>
    <el-dialog :visible.sync="dialog"
               :close-on-click-modal="false"
               :title="title"
               append-to-body
               top="4%"
               @open="open"
               width="90%"
               center
               style="overflow: hidden"
               @close="cancel">
        <div class="contentCls" v-loading="editLoading" v-html="data.content"/>
    </el-dialog>
</template>

<script>
    import {get} from '@/api/notice'

    export default {
        data() {
            return {
                noticeId: null,
                title: '',
                dialog: false,
                data: '',
                editLoading: true
            }
        },
        methods: {
            open() {
                get(this.noticeId).then(data => {
                    this.data = data
                    this.editLoading = false
                }).catch(error => {
                    console.log(error)
                })
            },
            cancel() {
                this.dialog = false;
                this.data = '';
                this.editLoading = ''
            }
        },

    }
</script>
<style>
    .contentCls {
        width: 98%;
        height: calc(100vh - 300px);
        overflow-y: auto;
    }
</style>
